<!--  -->
<template>
  <div class="showDataPanel" style="padding: 0px">
    <el-table class="timeTableView" :expand-row-keys="expands" :row-key="getRowKeys" :data="dataList"
              @expand-change="expandColumn">
      <el-table-column type="expand" align="center" min-width="20">
        <template #default="props">
          <div class="tableColumnView">
            <historical-data-echarts-panel ref="DailyDosageStatisicsBar" class="echartsView"/>
            <el-table :data="props.row.dataList">
              <el-table-column prop="rangeName" label="时间" align="center"/>
              <el-table-column label="使用量" prop="dataTime" align="center"/>
              <el-table-column label="使用费用" v-if="showColumn.totalWaterVolume" prop="totalWaterVolume"
                               align="center"/>
              <el-table-column label="累积量" v-if="showColumn.waterConsumption" prop="waterConsumption"
                               align="center"/>
              <el-table-column label="累积费用" v-if="showColumn.waterConsumption" prop="waterConsumption"
                               align="center"/>
            </el-table>
          </div>
        </template>
        <template #header>
          <el-popover
              placement="bottom"
              trigger="click"
              :visible="visible">
            <transition name="fade">
              <div>
                <div>选择显示字段</div>
                <div>
                  <el-checkbox v-model="showColumn.totalWaterVolume">使用量</el-checkbox>
                  <el-checkbox v-model="showColumn.waterConsumption">使用费用</el-checkbox>
                  <el-checkbox v-model="showColumn.totalWaterVolume">累积量</el-checkbox>
                  <el-checkbox v-model="showColumn.waterConsumption">累积费用</el-checkbox>
                </div>
              </div>
            </transition>
            <div style="text-align: right; margin: 0">
              <el-button size="mini" type="text" @click="visible = false">取消</el-button>
              <el-button size="mini" type="primary" plain @click="saveColumn">确定</el-button>
            </div>
            <template #reference>
              <svg-icon icon-class="set" class="setSvg" @click="visible = true"/>
            </template>
          </el-popover>
        </template>
      </el-table-column>
      <el-table-column prop="rangeName" label="时间" align="center"/>
      <el-table-column prop="deviceName" label="业主" align="center"/>
      <el-table-column prop="deviceNo" label="使用量" align="center"/>
      <el-table-column prop="lastReading" label="使用费用" align="center"/>
      <el-table-column prop="intervalWaterConsumption" label="单价" align="center"/>
      <el-table-column prop="deviceNo" label="分组" align="center"/>
      <el-table-column prop="lastReading" label="累积量" align="center"/>
      <el-table-column prop="intervalWaterConsumption" label="累计费用" align="center"/>
      <el-table-column prop="intervalWaterConsumption" label="备注" align="center"/>
    </el-table>
    <div class="line"></div>
    <el-row gutter="10">
      <el-col :span="12">
        <div class="title">分时分段使用量</div>
        <time-segment-usage-pie ref="time_segment_usage_pie"/>
      </el-col>
      <el-col :span="12">
        <div class="title">分时分段费用</div>
        <time-divisioncharge-pie ref="time_divisioncharge_pie"/>
      </el-col>
    </el-row>

  </div>
</template>

<script>

import {setEchartsData} from '../../../utils/public'
import HistoricalDataEchartsPanel from "@/views/data/components/HistoricalDataEchartsPanel.vue";
import TimeDivisionchargePie from "@/views/charging/components/TimeDivisionchargePie.vue";
import TimeSegmentUsagePie from "@/views/charging/components/TimeSegmentUsagePie.vue";

let component;
export default {
  data() {
    return {
      showChartsData: {},
      dataList: [],
      visible: false,
      showColumn: {
        totalWaterVolume: true,
        waterConsumption: false
      },
      expands: [], // 只展开一行放入当前行id
      getRowKeys: (row) => { // 获取当前行id
        return row.deviceNo; // 这里看这一行中需要根据哪个属性值是id
      }
    };
  },
  components: {TimeSegmentUsagePie, TimeDivisionchargePie, HistoricalDataEchartsPanel},
  methods: {
    queryData() {
      component.$refs.time_divisioncharge_pie.setData();
      component.$refs.time_segment_usage_pie.setData();
    },
    expandColumn(row, expandedRows) {
      // 每次只展开一行
      if (expandedRows.length) {
        component.expands = []
        if (row) {
          component.expands.push(row.deviceNo);
          component.showChartsData = row.chart;
          setEchartsData(component);
        }
      } else {
        component.expands = []
      }
    },
    saveColumn() {
      //持久化存储
      localStorage.setItem("charging", JSON.stringify(this.showColumn))
      this.visible = false;
      if (component.expands.length == 0) return;
      setEchartsData(component);
    }
  },
  mounted() {
    component = this;
    //获取持久化存储
    if (localStorage.getItem("charging")) {
      this.showColumn = JSON.parse(localStorage.getItem("charging"))
    } else {
      this.showColumn = {
        totalWaterVolume: true,
        waterConsumption: false
      };
    }
  }
}

</script>
<style lang='scss'>
.timeTableView {
  width: 100%;
  height: 370px;
}

.title {
  color: #e0e9f2;
  padding: 0px 20px 0px 20px;
}

</style>